<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
	<script src="../static/public/jquery/jquery.min.js" ></script>
    <title>自定义弹窗示例</title>  
	<style>
		.dropdown {  
		            position: fixed;  
		           /* top: 100px;  */
		            left: 45%; 
		         /*   transform: translateX(-50%); */  
		            background-color: antiquewhite;  
		           padding: 10px; 
		            border-radius: 10px;  
		            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
		            display: none;  
		            animation: slide 1s forwards;  
		        }
		        @keyframes slide {  
		            100% {  
		                transform: translateY(100px);  
		            }  
		        }  
	</style>
</head>  
<body>  
<input type="hidden" value='点击了' id="mybu">
     <!-- <button onclick="showDropdown()">点击打开弹出框</button>  -->
          <div class="dropdown">  
              <h2>弹出框内容</h2>  
           <!--   <p>这是一个从上往下滑落的弹出框，具有一定的延迟时间，然后会自动消失。</p>  -->
          </div>
		  {% if 'msg' in pd.keys() %}
		  <!-- 隐藏框里面放关于增删改查的信息--> 
		        <input type='hidden' value="{{pd.msg[0]}}" id="showdownbox" />
		  	   {% set res = pd.msg[0] %}
		         {% endif %}
		  
		    <div class="dropshowdown">
		        <h4>{{res}}</h4>  
		    </div>
          <script>  
		  /* 关于*/
              function showDropdown() {  
				  
                  const dropdown = document.querySelector('.dropdown');  
				 var flagmy = document.getElementById('mybu').value;
				if(flagmy == '点击了'){ 
					dropdown.style.display = 'block';
					
					setTimeout(() => {  
					    dropdown.style.display = 'none';  
						// flagmy.val(null)
					}, 2000); 
				}
				
				 
                  
              }  
			  showDropdown()
          </script>  
</body>  
</html>  